@import '../../less/variables.less';

@leftWidth: 200px;
@defaultHeight: 14px;
@liHeight: 22px;
@headHeight: 30px;
@barColor: #ac0404;
@liWidth: 100px;

.h5ds-timeline-btn {
    position: absolute;
    height: 15px;
    text-align: center;
    top: -17px;
    left: 0;
    color: @text1;
    width: 100%;
    z-index: 9999;
    background: @color3;
    cursor: move;
}

.h5ds-timeline-box {
    overflow: hidden;
    height: @defaultHeight;
    position: absolute;
    z-index: 999;
    overflow: hidden;
    left: 140px;
    right: 350px;
    bottom: 0;
    background: @color4;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
}

.h5ds-timeline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: content-box;
    border-top: 13px solid @color3;
    border-left: 5px solid @color3;
    border-right: 5px solid @color3;

    span {
        display: inline-block;
    }

    * {
        box-sizing: border-box;
    }

    .ant-input-number-handler-wrap {
        span {
            display: block;
        }
    }

    .h5ds-timeline-item1 {
        width: 140px;
        border-right: 1px solid @color3;
    }

    .h5ds-timeline-item2 {
        width: 60px;
    }

    .h5ds-timeline-left {
        width: @leftWidth;
        background: @timebg;
        height: 100%;
        font-size: 12px;
    }

    .h5ds-timeline-right {
        height: 100%;
        top: 0;
        position: absolute;
        left: @leftWidth; // margin-left: 10px;
        right: 0;
    }

    // 顶部
    .h5ds-timeline-header {
        height: 30px;
        position: relative;

        .h5ds-timeline-item1,
        .h5ds-timeline-item2 {
            float: left;
            height: 30px;
            line-height: 30px;
        }

        .h5ds-timeline-left {
            position: relative;
            z-index: 200;

            .h5ds-timeline-item1,
            .h5ds-timeline-item2 {
                vertical-align: top;
                border-bottom: 1px solid @color3;
                text-align: center;
            }

            a {
                color: @color2;
                margin: 0 2px;
            }

            .h5ds-timeline-play {
                height: 100%;
                display: inline-block;
                margin-left: 20px;

                a {
                    color: @main;
                }
            }
        }

        .h5ds-timeline-right {
            border-bottom: 1px solid @color3;
        }

        .h5ds-timeline-bar {
            position: absolute;
            height: 100%;
            width: 10px;
            margin-left: -4px;
            height: @headHeight;
            background: rgba(172, 4, 4, 0.3);
            border: 2px solid @barColor;
            cursor: move;
            z-index: 100;
            transition-timing-function: linear !important;

            &::before {
                pointer-events: none;
                left: 2px;
                content: '';
                display: block;
                width: 2px;
                position: absolute;
                height: 1000px;
                top: @headHeight - 4px;
                background: @barColor;
            }
        }
    }

    // 刻度
    .h5ds-timeline-scale {
        height: 100%;
        overflow: hidden;
        position: relative;
        left: 0;

        li {
            display: inline-block;
            width: @liWidth;
            font-size: 12px;
            height: 100%;
            position: relative;
            color: @color2;

            .h5ds-timeline-dot {
                display: inline-block;
                height: 5px;
                width: 1px;
                background: #fff;
                margin-left: @liWidth/10px - 1px;
                position: relative;
                top: 14px;
                opacity: 0.2;
            }

            &::before {
                position: absolute;
                bottom: 0;
                left: -1px;
                content: '';
                display: inline-block;
                height: 14px;
                background: @color2;
                width: 1px;
            }

            span {
                display: inline-block;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }

    // body 部分
    .h5ds-timeline-body {
        position: absolute;
        width: 100%;
        bottom: 20px;
        top: 30px;
        left: 0;
        overflow: hidden;
        overflow-y: scroll;

        .h5ds-timeline-left {
            width: @leftWidth;
            position: absolute;
            z-index: 200;
            top: 0;
            left: 0;

            .h5ds-timeline-active {
                background: @color5;
            }

            .h5ds-timeline-item1 {
                text-indent: 10px;
                height: @liHeight;
            }

            .h5ds-timeline-item2 {
                text-align: center;

                a {
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    border-radius: 100px;
                    background: @color2;
                    margin: 0 8px;
                }

                .h5ds-timeline-active {
                    background: @main;
                }
            }

            li {
                height: @liHeight;
                background: @timebg;
                color: @color2;
                position: relative;
                border-bottom: 1px solid @color3;
                cursor: pointer;
            }
        }

        .h5ds-timeline-right {
            position: absolute;
            left: @leftWidth;
            top: 0;
            right: 0;

            .h5ds-timeline-timenode {
                display: inline-block;
                background: #815fa7; // 动画是紫色
                color: #ca9aff;
                position: absolute;
                height: 16px;
                margin: 3px 0;
                overflow: hidden;
                font-size: 12px;
                text-indent: 10px;
                cursor: move;

                .h5ds-timeline-timenode-right,
                .h5ds-timeline-timenode-left {
                    cursor: col-resize;
                    position: absolute;
                    height: 100%;
                    width: 4px;
                    top: 0;
                    z-index: 100;
                }

                .h5ds-timeline-timenode-right {
                    right: 0;
                    background: @line;
                }

                .h5ds-timeline-timenode-left {
                    left: 0;
                    background: @main;
                }
            }

            .h5ds-timeline-soundnode {
                background: url(http://h5ds-cdn.oss-cn-beijing.aliyuncs.com/static/images/sound.png)#59b37d; // 声音是绿色
                background-size: auto 100%;
            }

            .h5ds-timeline-layers-right {
                position: relative;
            }

            .h5ds-timeline-active {
                background: rgba(0, 0, 0, 0.3);
            }

            li {
                border-bottom: 1px solid @color3;
                height: @liHeight;
                position: relative;
            }

            i {
                display: inline-block;
                width: 10px;
                height: 20px;
                border-right: 1px solid @color3;
                cursor: pointer;

                &.h5ds-timeline-selected {
                    background: @main;
                }

                &:hover:not(.h5ds-timeline-selected) {
                    background: @color5;
                }
            }
        }
    }

    // 右边图层列表部分
    .h5ds-timeline-layers {
        li {
            height: @liHeight;
            position: relative;
        }

        .h5ds-timeline-item1 {
            color: @color2;
            padding-left: 5px;
            font-size: 12px;
            text-align: left;
            height: @liHeight;
            overflow: hidden;
        }

        .h5ds-timeline-right {
            height: @liHeight;
        }

        .h5ds-timeline-view,
        .h5ds-timeline-lock {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 100px;
            background: @color2;
            position: relative;
            top: -2px;
            margin: 0 6px;
        }
    }

    // 底部
    .h5ds-timeline-footer {
        height: 20px;
        line-height: 20px;
        color: @text1;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 2000;

        .h5ds-timeline-left {
            background: @color3;
        }

        .h5ds-timeline-right {
            background: @color3;
        }
    }

    // 模拟滚动条
    .h5ds-timeline-slider {
        height: 16px;
        margin: 1px;
        background: @color5;
        position: relative;
        overflow: auto;
        overflow-y: hidden;
        cursor: move;

        .h5ds-timeline-slider-leng {
            height: 1px;
            top: -1px;
        }

        /* Let's get this party started */
        /* Let's get this party started */
        &::-webkit-scrollbar {
            width: 5px;
            height: 14px;
        }

        &::-webkit-scrollbar-track {
            background: @color6;
        }

        &::-webkit-scrollbar-thumb {
            background: @color2;
            border-radius: 0;
        }

        &::-webkit-scrollbar-thumb:window-inactive {
            background: @color2;
        }

        &::-webkit-scrollbar-button:vertical:decrement,
        &::-webkit-scrollbar-button:vertical:increment {
            height: 5px;
            width: 5px;
            background: @color6;
        }
    }
}
